<template>  
    <div class="number-animation">  
        <div :class="{ 'animated-number': isAnimating }">数字滚动:{{ currentNumber }}</div>  
    </div>  
    <div class="button-box">
        <div class="start" @click="start">开始</div>
        <!-- <div class="gostart">继续</div> -->
        <div class="stop" @click="stopAnimation">停止</div>
    </div>
  </template>  
    
  <script>  
  export default {  
    name: 'NumberAnimation',  
    props: {  
      maxValue: {  
        type: Number,  
        required: true,  
      },  
      animationInterval: {  
        type: Number,  
        default: 60000, // 默认1分钟  
      }, 
      id:{
        type:Number,
        required:true
      } 
    },  
    data() {  
      return {  
        currentNumber: 0,  
        isAnimating: false,  
        intervalId: null,  
      };  
    },  
    mounted() {  
      
    },  
    beforeDestroy() {  
      this.stopAnimation();  
    },  
    methods: {  
      start(){
        this.startAnimation();  
      },
      stop(){

      },
      startAnimation() {  
        console.log(this.intervalId,'123123')
        if (this.intervalId) return;  
        this.intervalId = setInterval(() => {  
          if (this.currentNumber >= this.maxValue) {  
            this.currentNumber = 0;
            this.stopAnimation()  
          } else {  
            this.currentNumber++;  
          }  
          this.isAnimating = true;  
    
          // 假设我们有一个动画效果，例如CSS过渡  
          setTimeout(() => {  
            this.isAnimating = false;  
          }, 500); // 假设动画持续时间为500毫秒  
        }, this.animationInterval);  
      },  
      stopAnimation() {  
        clearInterval(this.intervalId);  
        this.intervalId = null;  
      },  
    },  
  };  
  </script>  
    
  <style scoped>  
    .number-animation {  
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
    }  
    .count{
        width: 100%;
        display: flex;
        flex-direction: row;
        text-align: center;
    }
    
  .animated-number {  
    /* 假设我们使用CSS过渡作为动画效果 */  
    transition: opacity 0.5s;  
    opacity: 1;  
  }  
  .button-box{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .start,.stop{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    color: black;
    background: #dbfbdb;
    margin-right: 30px;
    margin-top: 30px;
  }
  </style>